<template>
  <template v-if="currentUser">
    <van-cell-group inset>
      <van-cell to="/user/update">
        <van-card
            :desc="currentUser.profile"
            :thumb="currentUser.avatarUrl"
            :title="currentUser?.userName"
        >
          <template #tags>
            <van-tag plain type="primary" v-for="tag in currentUser.tags" style="margin: 5px">
              {{ tag }}
            </van-tag>
          </template>
        </van-card>
      </van-cell>
      <van-divider/>

      <van-cell :value="currentUser.id" center title="编号">
        <template #icon>
          <van-icon name="manager-o" size="18"/>
        </template>
      </van-cell>
      <van-divider/>
      <van-cell center is-link title="我创建的队伍" to="/user/team/create">
        <template #icon>
          <van-icon name="cluster-o" size="18"/>
        </template>
      </van-cell>
      <van-divider/>
      <van-cell center is-link title="我加入的队伍" to="/user/team/join">
        <template #icon>
          <van-icon name="friends-o" size="18"/>
        </template>
      </van-cell>
      <van-divider/>

      <template v-if="currentUser?.userRole === 1">
        <van-cell center is-link title="查看私有队伍" to="/user/team/private">
          <template #icon>
            <van-icon name="closed-eye" size="18"/>
          </template>
        </van-cell>
        <van-divider/>
      </template>


      <van-cell :value="dateFormat(currentUser.createTime)" center title="注册时间">
        <template #icon>
          <van-icon name="clock-o" size="18"/>
        </template>
      </van-cell>
      <van-divider/>
      <van-cell center title="退出登录" @click="quit">
        <template #icon>
          <van-icon name="close" size="18"/>
        </template>
      </van-cell>
    </van-cell-group>
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getCurrentUser, logout} from "../services/user";
import dateFormat from "../plugins/dateFormat";
import {Toast} from "vant";

const user = ref();
const router = useRouter();
const currentUser = ref();

const getCurrentUserData = async () => {
  const res = await getCurrentUser();
  if (res?.tags) {
    res.tags = JSON.parse(res?.tags);
  }
  currentUser.value = res;
}

const quit = async () => {
  const res = await logout();
  if (res) {
    Toast.success('退出成功');
    router.push('/user/login');
  }
}

onMounted(() => {
  getCurrentUserData();
})


const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}
</script>

<style scoped>

</style>
